<style scoped>
.el-form-item{
  width: 400px;
}
</style>

<template>
<div>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
      <el-breadcrumb-item>学校统计数据</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <section class="chart">
    <el-row>
      <el-col :span="24">
        <div id="chartLine" style="width:100%; height:400px; margin:0 atuo;"></div>
      </el-col>
    </el-row>
  </section>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="查询区域">
      <el-select v-model="ruleForm.region" placeholder="请选择查询区域">
        <el-option label="全国" value="0"></el-option>
        <el-option label="省" value="1"></el-option>
        <el-option label="市" value="2"></el-option>
        <el-option label="县" value="3"></el-option>
        <el-option label="学校" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="ruleForm.region>0 && ruleForm.region < 4" prop="province" label="省">
      <el-input v-model="ruleForm.province"></el-input>
    </el-form-item>
    <el-form-item v-if="ruleForm.region>1 && ruleForm.region < 4" prop="city" label="市">
      <el-input v-model="ruleForm.city"></el-input>
    </el-form-item>
    <el-form-item v-if="ruleForm.region>2 && ruleForm.region < 4" prop="area" label="县/区">
      <el-input v-model="ruleForm.area"></el-input>
    </el-form-item>
    <el-form-item label="学校" v-if="ruleForm.region>3" prop="school_name">
      <el-input v-model="ruleForm.school_name" @change="schoolName"></el-input>
    </el-form-item>
    <el-form-item prop="date" label="活动时间">
      <el-date-picker
        v-model="ruleForm.date"
        type="daterange"
        align="left"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即查询</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</div>  
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      title: '学校统计数据',
      // 创建时间
      time: [],
      // 关注学生数量
      student: [],
      // 交押金数量
      deposit: [],
      // 购买服务数量
      service: [],
      school_list: [],
      ruleForm: {},
      rules: {
        province: [
          { required: true, message: '请填入省', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请填入市', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请填入县/区', trigger: 'blur' }
        ],
        school_name: [
          { required: true, message: '请输入学校名字' }
        ],
        date: [
          { required: true, message: '请选择日期' }
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted () {
    APP.ajax('analysis/schoolSummary', {}, res => {
      this.resetData(res.data.data)
    })
  },
  methods: {
    drawLineChart () {
      this.chartLine = echarts.init(document.getElementById('chartLine'))
      this.chartLine.setOption({
        title: {
          text: this.title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['学生数量', '缴纳押金数', '购买服务数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
          },
          boundaryGap: false,
          data: this.time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '学生数量',
            type: 'line',
            data: this.student
          },
          {
            name: '缴纳押金数',
            type: 'line',
            data: this.deposit
          },
          {
            name: '购买服务数',
            type: 'line',
            data: this.service
          }
        ]
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            from: APP.fomdata(this.ruleForm.date[0]).substring(0, 10),
            to: APP.fomdata(this.ruleForm.date[1]).substring(0, 10),
            province: this.ruleForm.province,
            city: this.ruleForm.city,
            area: this.ruleForm.area,
            school_id: this.ruleForm.school_id
          }
          APP.ajax('analysis/schoolSummary', params, res => {
            if (res.data.status === 200) {
              this.resetData(res.data.data)
            } else {
              alert(res.data.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    schoolName () {
      let params = {
        province: '',
        city: '',
        area: '',
        school_name: this.ruleForm.school_name
      }
      APP.ajax('post@school/search', params, res => {
        this.ruleForm.school_id = res.data.data.data[0].id
      })
    },
    resetData (data) {
      this.time = []
      this.student = []
      this.deposit = []
      this.service = []
      data.forEach(el => {
        this.time.push(el.created_at)
        this.student.push(el.student_day)
        this.deposit.push(el.deposit_day)
        this.service.push(el.service_day)
      })
      this.drawLineChart()
    }
  }
}
</script>
